<template>
  <div class="app-container">
    <div class="filter-container  clearfix" algin="center">
      <el-input
        v-model="queryParam.appid"
        placeholder="appid"
        clearable
        class="filter-item form-search-input"
      />
      <el-button
        class="filter-item search"
        icon="el-icon-search"
        @click="handleSearch"
      >
        搜索
      </el-button>
      <el-button
        class="filter-item"
        icon="el-icon-refresh"
        @click="handleRefresh"
      >
        重置
      </el-button>
      <el-button
        class="filter-item fr"
        type="primary"
        icon="el-icon-plus"
        @click="handleCreate()"
      >
        新增
      </el-button>
      <el-dropdown
        @command="handleCommand"
        v-if="loginStoreAble"
        class="filter-item fr"
      >
        <el-button type="primary">
          登陆状态<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item disabled>账号信息</el-dropdown-item>
          <el-dropdown-item disabled>文档</el-dropdown-item>
          <el-dropdown-item command="logout">退出登入</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-button
        @click="storeDialogVisible = true"
        v-else
        class="filter-item fr"
        type="primary"
        >登录应用市场</el-button
      >
      <el-button
        v-if="this.selectedIds.length"
        size="small"
        class="filter-item mb-5"
        type="danger"
        icon="el-icon-delete"
        @click="handleMultiDelete"
      >
        批量删除
      </el-button>
    </div>
    <el-table
      ref="multipleTable"
      :data="data"
      tooltip-effect="dark"
      style="width: 100%"
      border
      fit
      @selection-change="handleSelectMulti"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="product_id" label="product_id" />
      <el-table-column prop="out_product_id" label="out_product_id" />
      <el-table-column prop="title" label="标题" />
      <el-table-column prop="template_id" label="template_id" />
      <el-table-column prop="status" label="状态" />
      <el-table-column prop="sales_count" label="销量" />
      <el-table-column prop="creator" label="创建人" />
      <el-table-column prop="created_at" label="创建时间" />
      <el-table-column prop="updated_at" label="更新时间" />
      <el-table-column label="操作">
        <template slot-scope="module">
          <el-button
            type="primary"
            icon="el-icon-edit"
            @click="handleUpdate(module.row)"
          />
          <el-button
            type="danger"
            icon="el-icon-delete"
            @click="handleDelete(module.row.id)"
          />
          <el-button
            type="primary"
            icon="el-icon-s-goods"
            @click="buy(module.row)"
            >购买</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="paginate.current"
      hide-on-single-page
      :page-sizes="paginate.sizes"
      :page-size="paginate.limit"
      :layout="paginate.layout"
      :total="paginate.total"
    />
    <!----------------------------------- 编辑 ---------------------------------------------->
    <el-dialog :title="title" :visible.sync="formVisible" @close="handleCancel">
      <el-form :ref="formName" :model="formFieldsData" :rules="rules">
        <el-form-item
          label="product_id"
          :label-width="formLabelWidth"
          prop="product_id"
        >
          <el-input
            v-model="formFieldsData.product_id"
            placeholder="请输入product_id"
            autocomplete="off"
            clearable
          />
        </el-form-item>
        <el-form-item
          label="out_product_id"
          :label-width="formLabelWidth"
          prop="out_product_id"
        >
          <el-input
            v-model="formFieldsData.out_product_id"
            placeholder="请输入out_product_id"
            autocomplete="off"
            clearable
          />
        </el-form-item>
        <el-form-item label="标题" :label-width="formLabelWidth" prop="title">
          <el-input
            v-model="formFieldsData.title"
            placeholder="标题"
            autocomplete="off"
            clearable
          />
        </el-form-item>
        <el-form-item
          label="副标题"
          :label-width="formLabelWidth"
          prop="sub_title"
        >
          <el-input
            v-model="formFieldsData.sub_title"
            placeholder="副标题"
            autocomplete="off"
            clearable
          />
        </el-form-item>
        <el-form-item
          label="主图"
          :label-width="formLabelWidth"
          prop="head_img"
        >
          <el-input
            v-model="formFieldsData.head_img"
            placeholder="主图"
            autocomplete="off"
            clearable
          />
        </el-form-item>
        <el-form-item
          label="商品详情"
          :label-width="formLabelWidth"
          prop="desc_info"
        >
          <el-input
            v-model="formFieldsData.desc_info"
            placeholder="商品详情"
            autocomplete="off"
            clearable
          />
        </el-form-item>
        <el-form-item
          label="品牌"
          :label-width="formLabelWidth"
          prop="brand_id"
        >
          <el-input
            v-model="formFieldsData.brand_id"
            placeholder="商家需要申请品牌"
            autocomplete="off"
            clearable
          />
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth" prop="status">
          <el-input
            v-model="formFieldsData.status"
            placeholder="商品线上状态,0:初始值,5:上架,6:回收站,9:逻辑删除,11:自主下架,12:售磬下架,13:违规下架/风控系统下架"
            autocomplete="off"
            clearable
          />
        </el-form-item>
        <el-form-item
          label="草稿箱状态"
          :label-width="formLabelWidth"
          prop="edit_status"
        >
          <el-input
            v-model="formFieldsData.edit_status"
            placeholder="商品草稿状态,0:初始值,1:编辑中,2:审核中,3:审核失败,4:审核成功"
            autocomplete="off"
            clearable
          />
        </el-form-item>
        <el-form-item
          label="SKU最小价格"
          :label-width="formLabelWidth"
          prop="min_price"
        >
          <el-input
            v-model="formFieldsData.min_price"
            placeholder="商品SKU最小价格（单位：分）"
            autocomplete="off"
            clearable
          />
        </el-form-item>
        <el-form-item label="类目" :label-width="formLabelWidth" prop="cats">
          <el-input
            v-model="formFieldsData.cats"
            placeholder="商家需要先申请可使用类目"
            autocomplete="off"
            clearable
          />
        </el-form-item>
        <el-form-item label="属性" :label-width="formLabelWidth" prop="attrs">
          <el-input
            v-model="formFieldsData.attrs"
            placeholder="属性"
            autocomplete="off"
            clearable
          />
        </el-form-item>
        <el-form-item
          label="商品型号"
          :label-width="formLabelWidth"
          prop="model"
        >
          <el-input
            v-model="formFieldsData.model"
            placeholder="商品型号"
            autocomplete="off"
            clearable
          />
        </el-form-item>
        <el-form-item label="分类" :label-width="formLabelWidth" prop="shopcat">
          <el-input
            v-model="formFieldsData.shopcat"
            placeholder="分类ID，对应信息通过 get_shop_cat 接口拿到"
            autocomplete="off"
            clearable
          />
        </el-form-item>
        <el-form-item label="skus" :label-width="formLabelWidth" prop="skus">
          <el-input
            v-model="formFieldsData.skus"
            placeholder="skus列表"
            autocomplete="off"
            clearable
          />
        </el-form-item>
        <el-form-item
          label="销量"
          :label-width="formLabelWidth"
          prop="sales_count"
        >
          <el-input
            v-model="formFieldsData.sales_count"
            placeholder="销量"
            autocomplete="off"
            clearable
          />
        </el-form-item>
        <el-form-item label="排序" :label-width="formLabelWidth" prop="weigh">
          <el-input
            v-model="formFieldsData.weigh"
            placeholder="排序"
            autocomplete="off"
            clearable
          />
        </el-form-item>
        <el-form-item
          label="template_id"
          :label-width="formLabelWidth"
          prop="template_id"
        >
          <el-input
            v-model="formFieldsData.template_id"
            placeholder="template_id"
            autocomplete="off"
            clearable
          />
        </el-form-item>
        <el-form-item
          label="ext_json"
          :label-width="formLabelWidth"
          prop="ext_json"
        >
          <el-input
            v-model="formFieldsData.ext_json"
            placeholder="ext_json"
            autocomplete="off"
            clearable
          />
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth" prop="memo">
          <el-input
            v-model="formFieldsData.memo"
            placeholder="备注"
            autocomplete="off"
            clearable
          />
        </el-form-item>
        <el-form-item
          label="ext_attrs"
          :label-width="formLabelWidth"
          prop="ext_attrs"
        >
          <el-input
            v-model="formFieldsData.ext_attrs"
            placeholder="ext_attrs"
            autocomplete="off"
            clearable
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel()">取 消</el-button>
        <el-button type="primary" @click="submit">保存草稿</el-button>
        <el-button type="primary" @click="submit">上架</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="登录应用市场"
      :visible.sync="storeDialogVisible"
      width="20%"
      center
      @close="closeDialog"
    >
      <el-row>
        <el-col>
          <el-alert title="请使用www.uctoo.com的帐号登录" type="info" show-icon>
          </el-alert>
        </el-col>
      </el-row>
      <el-row style="margin-top:10px">
        <el-col>
          <el-form
            :rules="storeFormRules"
            label-position="top"
            label-width="80px"
            :model="storeForm"
            ref="storeFormRef"
          >
            <el-form-item prop="email">
              <el-input
                prefix-icon="el-icon-user"
                ref="email"
                v-model="storeForm.email"
                placeholder="请输入邮箱"
                name="email"
                type="text"
                tabindex="1"
                autocomplete="on"
              />
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                prefix-icon="el-icon-lock"
                ref="password"
                show-password
                type="password"
                v-model="storeForm.password"
                placeholder="请输入密码"
                name="password"
                tabindex="2"
                autocomplete="on"
                @keyup.native="checkCapslock"
                @blur="capsTooltip = false"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleStoreForm"
                >登录</el-button
              >
              <el-button
                @click="
                  () => {
                    this.$refs.storeFormRef.resetFields();
                  }
                "
                >重置</el-button
              >
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
import formOperate from "@/layout/mixin/formOperate";
import { mapGetters, mapActions } from "vuex";
import { loginStore } from "@/api/user";
import { createOrder } from "@/api/unipay";
export default {
  mixins: [formOperate],
  data() {
    return {
      loginStatus: false,
      formName: "appstore",
      formLabelWidth: "120px",
      // 用户搜索
      queryParam: {
        title: ""
      },
      formVisible: false,
      formFieldsData: {
        product_id: "",
        out_product_id: "",
        title: "",
        sub_title: "",
        head_img: "",
        desc_info: "",
        brand_id: "",
        status: "",
        edit_status: "",
        min_price: "",
        cats: "",
        attrs: "",
        model: "",
        shopcat: "",
        skus: "",
        sales_count: "",
        weigh: "",
        template_id: "",
        ext_json: "",
        memo: "",
        ext_attrs: ""
      },
      url: "appstore",
      // 表单验证
      rules: {
        product_id: [
          { required: true, message: "请输入product_id", trigger: "blur" }
        ],
        out_product_id: [{ required: true, message: "请输入out_product_id" }],
        title: [{ required: true, message: "请输入title" }],
        status: [{ required: true, message: "请输入status" }],
        min_price: [{ required: true, message: "请输入min_price" }]
      },
      storeDialogVisible: false,
      storeForm: {},
      capsTooltip: false,
      storeFormRules: {
        email: [{ required: true, type: "email", trigger: "blur" }],
        password: [{ required: true, trigger: "blur" }]
      }
    };
  },
  computed: {
    ...mapGetters(["storeinfo"]),
    loginStoreAble() {
      return this.storeinfo && this.storeinfo.remember_token ? true : false;
    }
  },
  methods: {
    ...mapActions({
      loginStore: "user/loginStore",
      logoutStore: "user/logoutStore"
    }),
    errorHandler() {
      return true;
    },
    checkCapslock(e) {
      const { key } = e;
      this.capsTooltip = key && key.length === 1 && key >= "A" && key <= "Z";
    },
    handleStoreForm() {
      this.$refs.storeFormRef.validate(async valid => {
        if (valid) {
          let { code, data } = await loginStore(this.storeForm);
          if (code === 10000) {
            this.loginStore(data);
            this.storeDialogVisible = false;
          }
        }
      });
    },
    handleCommand(command) {
      this.logoutStore();
    },
    closeDialog() {
      this.$refs.storeFormRef.clearValidate();
    },
    async buy({ id }) {
      let res = await new Promise(resolve => {
        this.$confirm("确认购买该商品吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            resolve(true);
          })
          .catch(() => {
            resolve(false);
          });
      });
      if (!res) return;
      if (this.storeinfo.remember_token === undefined) {
        return this.$message.error("请先登录市场应用账号，再进行购买交易");
      }
      let { email, remember_token } = this.storeinfo;
      let query = { id };
      let data = { email, appstore_user_token: "Bearer" + remember_token };
      let { data: _data, code } = await createOrder(query, data);
      if (code === 10000) {
        let orderPayRoute = this.$router.resolve({
          path: "/unipayorder",
          query: _data
        });
        window.open(orderPayRoute.href, "_blank");
      }
    },
    submit() {}
  }
};
</script>
<style lang="scss" scoped>
.avatar {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
